<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-Element'>/**
</span> * @class Ext.Element
 */

// special markup used throughout Ext when box wrapping elements
Ext.Element.boxMarkup = '&lt;div class=&quot;{0}-tl&quot;&gt;&lt;div class=&quot;{0}-tr&quot;&gt;&lt;div class=&quot;{0}-tc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;{0}-ml&quot;&gt;&lt;div class=&quot;{0}-mr&quot;&gt;&lt;div class=&quot;{0}-mc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;{0}-bl&quot;&gt;&lt;div class=&quot;{0}-br&quot;&gt;&lt;div class=&quot;{0}-bc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';

Ext.Element.addMethods(function(){
    var INTERNAL = &quot;_internal&quot;,
        pxMatch = /(\d+\.?\d+)px/;
    return {
<span id='Ext-Element-method-applyStyles'>        /**
</span>         * More flexible version of {@link #setStyle} for setting style properties.
         * @param {String/Object/Function} styles A style specification string, e.g. &quot;width:100px&quot;, or object in the form {width:&quot;100px&quot;}, or
         * a function which returns such a specification.
         * @return {Ext.Element} this
         */
        applyStyles : function(style){
            Ext.DomHelper.applyStyles(this.dom, style);
            return this;
        },

<span id='Ext-Element-method-getStyles'>        /**
</span>         * Returns an object with properties matching the styles requested.
         * For example, el.getStyles('color', 'font-size', 'width') might return
         * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
         * @param {String} style1 A style name
         * @param {String} style2 A style name
         * @param {String} etc.
         * @return {Object} The style object
         */
        getStyles : function(){
            var ret = {};
            Ext.each(arguments, function(v) {
               ret[v] = this.getStyle(v);
            },
            this);
            return ret;
        },

        // private  ==&gt; used by ext full
        setOverflow : function(v){
            var dom = this.dom;
            if(v=='auto' &amp;&amp; Ext.isMac &amp;&amp; Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
                dom.style.overflow = 'hidden';
                (function(){dom.style.overflow = 'auto';}).defer(1);
            }else{
                dom.style.overflow = v;
            }
        },

<span id='Ext-Element-method-boxWrap'>       /**
</span>        * &lt;p&gt;Wraps the specified element with a special 9 element markup/CSS block that renders by default as
        * a gray container with a gradient background, rounded corners and a 4-way shadow.&lt;/p&gt;
        * &lt;p&gt;This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
        * {@link Ext.Panel} when &lt;tt&gt;{@link Ext.Panel#frame frame=true}&lt;/tt&gt;, {@link Ext.Window}).  The markup
        * is of this form:&lt;/p&gt;
        * &lt;pre&gt;&lt;code&gt;
    Ext.Element.boxMarkup =
    &amp;#39;&amp;lt;div class=&quot;{0}-tl&quot;&gt;&amp;lt;div class=&quot;{0}-tr&quot;&gt;&amp;lt;div class=&quot;{0}-tc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
     &amp;lt;div class=&quot;{0}-ml&quot;&gt;&amp;lt;div class=&quot;{0}-mr&quot;&gt;&amp;lt;div class=&quot;{0}-mc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
     &amp;lt;div class=&quot;{0}-bl&quot;&gt;&amp;lt;div class=&quot;{0}-br&quot;&gt;&amp;lt;div class=&quot;{0}-bc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;#39;;
        * &lt;/code&gt;&lt;/pre&gt;
        * &lt;p&gt;Example usage:&lt;/p&gt;
        * &lt;pre&gt;&lt;code&gt;
    // Basic box wrap
    Ext.get(&quot;foo&quot;).boxWrap();

    // You can also add a custom class and use CSS inheritance rules to customize the box look.
    // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
    // for how to create a custom box wrap style.
    Ext.get(&quot;foo&quot;).boxWrap().addClass(&quot;x-box-blue&quot;);
        * &lt;/code&gt;&lt;/pre&gt;
        * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
        * (defaults to &lt;tt&gt;'x-box'&lt;/tt&gt;). Note that there are a number of CSS rules that are dependent on
        * this name to make the overall effect work, so if you supply an alternate base class, make sure you
        * also supply all of the necessary rules.
        * @return {Ext.Element} The outermost wrapping element of the created box structure.
        */
        boxWrap : function(cls){
            cls = cls || 'x-box';
            var el = Ext.get(this.insertHtml(&quot;beforeBegin&quot;, &quot;&lt;div class='&quot; + cls + &quot;'&gt;&quot; + String.format(Ext.Element.boxMarkup, cls) + &quot;&lt;/div&gt;&quot;));        //String.format('&lt;div class=&quot;{0}&quot;&gt;'+Ext.Element.boxMarkup+'&lt;/div&gt;', cls)));
            Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
            return el;
        },

<span id='Ext-Element-method-setSize'>        /**
</span>         * Set the size of this Element. If animation is true, both width and height will be animated concurrently.
         * @param {Mixed} width The new width. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
         * &lt;li&gt;A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
         * &lt;li&gt;A String used to set the CSS width style. Animation may &lt;b&gt;not&lt;/b&gt; be used.
         * &lt;li&gt;A size object in the format &lt;code&gt;{width: widthValue, height: heightValue}&lt;/code&gt;.&lt;/li&gt;
         * &lt;/ul&gt;&lt;/div&gt;
         * @param {Mixed} height The new height. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
         * &lt;li&gt;A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
         * &lt;li&gt;A String used to set the CSS height style. Animation may &lt;b&gt;not&lt;/b&gt; be used.&lt;/li&gt;
         * &lt;/ul&gt;&lt;/div&gt;
         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
         * @return {Ext.Element} this
         */
        setSize : function(width, height, animate){
            var me = this;
            if(typeof width == 'object'){ // in case of object from getSize()
                height = width.height;
                width = width.width;
            }
            width = me.adjustWidth(width);
            height = me.adjustHeight(height);
            if(!animate || !me.anim){
                me.dom.style.width = me.addUnits(width);
                me.dom.style.height = me.addUnits(height);
            }else{
                me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));
            }
            return me;
        },

<span id='Ext-Element-method-getComputedHeight'>        /**
</span>         * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
         * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
         * if a height has not been set using CSS.
         * @return {Number}
         */
        getComputedHeight : function(){
            var me = this,
                h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
            if(!h){
                h = parseFloat(me.getStyle('height')) || 0;
                if(!me.isBorderBox()){
                    h += me.getFrameWidth('tb');
                }
            }
            return h;
        },

<span id='Ext-Element-method-getComputedWidth'>        /**
</span>         * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
         * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
         * if a width has not been set using CSS.
         * @return {Number}
         */
        getComputedWidth : function(){
            var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
            if(!w){
                w = parseFloat(this.getStyle('width')) || 0;
                if(!this.isBorderBox()){
                    w += this.getFrameWidth('lr');
                }
            }
            return w;
        },

<span id='Ext-Element-method-getFrameWidth'>        /**
</span>         * Returns the sum width of the padding and borders for the passed &quot;sides&quot;. See getBorderWidth()
         for more information about the sides.
         * @param {String} sides
         * @return {Number}
         */
        getFrameWidth : function(sides, onlyContentBox){
            return onlyContentBox &amp;&amp; this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
        },

<span id='Ext-Element-method-addClassOnOver'>        /**
</span>         * Sets up event handlers to add and remove a css class when the mouse is over this element
         * @param {String} className
         * @return {Ext.Element} this
         */
        addClassOnOver : function(className){
            this.hover(
                function(){
                    Ext.fly(this, INTERNAL).addClass(className);
                },
                function(){
                    Ext.fly(this, INTERNAL).removeClass(className);
                }
            );
            return this;
        },

<span id='Ext-Element-method-addClassOnFocus'>        /**
</span>         * Sets up event handlers to add and remove a css class when this element has the focus
         * @param {String} className
         * @return {Ext.Element} this
         */
        addClassOnFocus : function(className){
            this.on(&quot;focus&quot;, function(){
                Ext.fly(this, INTERNAL).addClass(className);
            }, this.dom);
            this.on(&quot;blur&quot;, function(){
                Ext.fly(this, INTERNAL).removeClass(className);
            }, this.dom);
            return this;
        },

<span id='Ext-Element-method-addClassOnClick'>        /**
</span>         * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
         * @param {String} className
         * @return {Ext.Element} this
         */
        addClassOnClick : function(className){
            var dom = this.dom;
            this.on(&quot;mousedown&quot;, function(){
                Ext.fly(dom, INTERNAL).addClass(className);
                var d = Ext.getDoc(),
                    fn = function(){
                        Ext.fly(dom, INTERNAL).removeClass(className);
                        d.removeListener(&quot;mouseup&quot;, fn);
                    };
                d.on(&quot;mouseup&quot;, fn);
            });
            return this;
        },

<span id='Ext-Element-method-getViewSize'>        /**
</span>         * &lt;p&gt;Returns the dimensions of the element available to lay content out in.&lt;p&gt;
         * &lt;p&gt;If the element (or any ancestor element) has CSS style &lt;code&gt;display : none&lt;/code&gt;, the dimensions will be zero.&lt;/p&gt;
         * example:&lt;pre&gt;&lt;code&gt;
        var vpSize = Ext.getBody().getViewSize();

        // all Windows created afterwards will have a default value of 90% height and 95% width
        Ext.Window.override({
            width: vpSize.width * 0.9,
            height: vpSize.height * 0.95
        });
        // To handle window resizing you would have to hook onto onWindowResize.
        * &lt;/code&gt;&lt;/pre&gt;
        *
        * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
        * To obtain the size including scrollbars, use getStyleSize
        *
        * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
        */

        getViewSize : function(){
            var doc = document,
                d = this.dom,
                isDoc = (d == doc || d == doc.body);

            // If the body, use Ext.lib.Dom
            if (isDoc) {
                var extdom = Ext.lib.Dom;
                return {
                    width : extdom.getViewWidth(),
                    height : extdom.getViewHeight()
                };

            // Else use clientHeight/clientWidth
            } else {
                return {
                    width : d.clientWidth,
                    height : d.clientHeight
                };
            }
        },

<span id='Ext-Element-method-getStyleSize'>        /**
</span>        * &lt;p&gt;Returns the dimensions of the element available to lay content out in.&lt;p&gt;
        *
        * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
        * To obtain the size excluding scrollbars, use getViewSize
        *
        * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
        */

        getStyleSize : function(){
            var me = this,
                w, h,
                doc = document,
                d = this.dom,
                isDoc = (d == doc || d == doc.body),
                s = d.style;

            // If the body, use Ext.lib.Dom
            if (isDoc) {
                var extdom = Ext.lib.Dom;
                return {
                    width : extdom.getViewWidth(),
                    height : extdom.getViewHeight()
                };
            }
            // Use Styles if they are set
            if(s.width &amp;&amp; s.width != 'auto'){
                w = parseFloat(s.width);
                if(me.isBorderBox()){
                   w -= me.getFrameWidth('lr');
                }
            }
            // Use Styles if they are set
            if(s.height &amp;&amp; s.height != 'auto'){
                h = parseFloat(s.height);
                if(me.isBorderBox()){
                   h -= me.getFrameWidth('tb');
                }
            }
            // Use getWidth/getHeight if style not set.
            return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
        },

<span id='Ext-Element-method-getSize'>        /**
</span>         * Returns the size of the element.
         * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
         * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
         */
        getSize : function(contentSize){
            return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
        },

<span id='Ext-Element-method-repaint'>        /**
</span>         * Forces the browser to repaint this element
         * @return {Ext.Element} this
         */
        repaint : function(){
            var dom = this.dom;
            this.addClass(&quot;x-repaint&quot;);
            setTimeout(function(){
                Ext.fly(dom).removeClass(&quot;x-repaint&quot;);
            }, 1);
            return this;
        },

<span id='Ext-Element-method-unselectable'>        /**
</span>         * Disables text selection for this element (normalized across browsers)
         * @return {Ext.Element} this
         */
        unselectable : function(){
            this.dom.unselectable = &quot;on&quot;;
            return this.swallowEvent(&quot;selectstart&quot;, true).
                        addClass(&quot;x-unselectable&quot;);
        },

<span id='Ext-Element-method-getMargins'>        /**
</span>         * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
         * then it returns the calculated width of the sides (see getPadding)
         * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
         * @return {Object/Number}
         */
        getMargins : function(side){
            var me = this,
                key,
                hash = {t:&quot;top&quot;, l:&quot;left&quot;, r:&quot;right&quot;, b: &quot;bottom&quot;},
                o = {};

            if (!side) {
                for (key in me.margins){
                    o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;
                }
                return o;
            } else {
                return me.addStyles.call(me, side, me.margins);
            }
        }
    };
}());
</pre>
</body>
</html>
